<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>027：用js实现弹窗式div</title>
		<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
		<style type="text/css">
			.black_overlay{
				display: none;
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,.5);
				z-index:1001;
			}
			.white_content {
				display: none;
				position: absolute;
				top: 10%;
				left: 10%;
				width: 80%;
				height: 80%;
				border: 16px solid lightblue;
				background-color: white;
				/*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容*/
				overflow: auto;
				z-index:1002;
			}
			.title {
				height: 40px;
				text-align: right;
				/*默认光标（通常是一个箭头）*/
				cursor: default;
			}
			.close {
				font-size: 16px;
				/*光标呈现为指示链接的指针（一只手）*/
				cursor: pointer;
			}
		</style>
		
		<script type="text/javascript">
			//弹出隐藏层
			function ShowDiv(show_div,bg_div){
				document.getElementById(show_div).style.display='block';
				document.getElementById(bg_div).style.display='block';
				var bgdiv = document.getElementById(bg_div);
				bgdiv.style.width = document.body.scrollWidth; 
				//bgdiv.style.height = $(document).height();
				$("#"+bg_div).height($(document).height());
			};
			//关闭弹出层
			function CloseDiv(show_div,bg_div)
			{
				document.getElementById(show_div).style.display='none';
				document.getElementById(bg_div).style.display='none';
			};
		</script>
	</head>
	<body>
		<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />
		<!--弹出层时背景层div-->
		<div class="black_overlay" id="fade"></div>
		<div class="white_content" id="MyDiv">
		 	<div class="title">
		  		<span class="close" onclick="CloseDiv('MyDiv','fade')">关闭</span>
			</div>
			<p>这里是弹出窗口div中显示的内容...</p>
		</div>
		
	</body>
</html>
